<template>
    <div id="app" v-loading="loading">
        <div class="title">审批放单</div>
        <el-row class="tableBtnTop">
            <el-select
                v-model="searchType"
                placeholder="请选择" class="filter"
            >
                <el-option
                    v-for="(typeItem,typeIndex) of searchTypeList"
                    :key="typeItem.value"
                    :value="typeItem.value"
                    :label="typeItem.name"
                ></el-option>
            </el-select>
            <div class="search">
                <el-input placeholder="请输入内容"
                    v-model="searchText"
                    @keyup.enter.native="startSearch"
                >
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
        </el-row>
        <el-table :data="tableData" border>
            <el-table-column prop="user" label="任务类型" :show-overflow-tooltip="true" min-width="109">
                <template slot-scope="scope">
                    <div class="userHead" style="cursor: default;">
                        <img :src="scope.row.avatar" class="square" />
                        {{
                            scope.row.first_name
                        }} -
                        {{
                            scope.row.seconde_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="user" label="发布人" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead" @click="$router.push(`/user/detail/${scope.row.user_id}`)">
                        {{
                            scope.row.nick_name
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="task_title" label="任务标题" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="userHead ell" @click="auditWill(scope.$index)">
                        {{
                            scope.row.title
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="time" label="发布时间" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            countTrialDate(scope.row.time_created * 1000)
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="price" label="单价 / 总价" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <font color="#F30">
                        {{priceFormat(scope.row.amount)}} /
                        {{priceFormat(scope.row.amount * scope.row.total_accepts)}}
                    </font>
                </template>
            </el-table-column>
            <el-table-column prop="number" label="任务数量" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>
                        {{
                            scope.row.total_accepts
                        }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="btn" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="tableBtn">
                        <template v-if="curAuditTask.id != scope.row.id">
                            <a @click="auditWill(scope.$index)">
                                审批
                            </a>
                        </template>
                        <template v-if="curAuditTask.id == scope.row.id">
                            <div>
                                处理中...
                            </div>
                        </template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="paginationBlock">
            <el-pagination layout="jumper,prev,pager, next,total"
                :total="listNumsTotal"
                :page-size="10"
                @current-change="changePage"
            >
            </el-pagination>
        </div>
        <el-dialog title="审批任务"
            width="1100px"  top="100px"
            :visible.sync="approvalShow"
            :close-on-click-modal="false"
            :show-close="false"
        >
            <div>
                <el-form class="form" label-position="top">
                    <el-row :gutter="40" class="other">
                        <el-col :span="4">
                            <el-form-item label="做任务限时,分钟">
                                <div class="disbox">
                                    <el-input
                                        v-model="curAuditTask.limited_time"
                                    >
                                    </el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="派单人审核时间,分钟">
                                <div class="disbox">
                                    <el-input class="disflex"
                                        v-model="curAuditTask.limited_time_approve"
                                    ></el-input>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="任务截至过期,小时">
                                <div class="disbox">
                                    <el-input class="disflex"
                                        v-model="curAuditTask.deadline_time"
                                    ></el-input>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="grid-content bg-purple">
                            <el-form-item label="可接设备">
                                <div class="disbox">
                                    <el-checkbox-group
                                        v-model="curAuditTask.limited_os"
                                        class="disflex"
                                        :min="1"
                                    >
                                        <el-checkbox
                                            v-for="osItem of osList"
                                            :key="osItem.name"
                                            :label="osItem.value"
                                        >
                                        {{
                                            osItem.name
                                        }}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                            </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                          <el-form-item label="任务标签">
                              <div>
                                  <el-tag
                                      :key="tag"
                                      v-for="tag in dynamicTags"
                                      closable
                                      :disable-transitions="false"
                                      @close="handleClose(tag)">
                                      {{tag}}
                                  </el-tag>
                                  <el-input
                                      class="input-new-tag"
                                      v-if="inputVisible"
                                      v-model="inputValue"
                                      ref="saveTagInput"
                                      size="small"
                                      @keyup.enter.native="handleInputConfirm"
                                      @blur="handleInputConfirm"
                                  >
                                  </el-input>
                                  <el-button v-else class="button-new-tag" size="small"
                                      @click="showInput">
                                      + 新标签
                                  </el-button>
                              </div>
                          </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-form class="form" label-position="top">
                    <el-row :gutter="35" class="other">
                        <el-col :span="8">
                            <el-form-item label="任务标题">
                                <el-input
                                    v-model="curAuditTask.title"
                                ></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="难度等级">
                                <el-select placeholder="请选择" class="filter"
                                    v-model="curAuditTask.diffculty_level"
                                    @change="levelChange"
                                >
                                    <el-option
                                        v-for="taskLevelItem of taskLevelList"
                                        :key="taskLevelItem.name"
                                        :label="taskLevelItem.name"
                                        :value="taskLevelItem.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="操作">
                                <el-radio-group style="margin-bottom:15px;"
                                    v-model="auditStatus"
                                    @change="auditStatusChange"
                                >
                                    <el-radio :label="1">审批通过</el-radio>
                                    <el-radio :label="0">拒绝</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-autocomplete
                        :fetch-suggestions='querySearch'
                        placeholder="请输入内容"
                        style="width: 100%;"
                        v-model="refusalCause"
                        @select="handleSelect"
                    >
                        <template slot-scope="{ item }">
                            <div class="name ell"
                                style="white-space: normal;"
                            >{{ item }}</div>
                        </template>
                    </el-autocomplete>
                </el-form>
                <div>单价/总价：{{priceFormat(curAuditTask.amount)}} / {{priceFormat(curAuditTask.amount * curAuditTask.total_accepts)}}</div>
                <div slot="footer" class="dialog-footer approval-btn-group">
                    <!-- <el-button @click="updateTaskDetail" type="warning">
                        修改
                    </el-button> -->
                    <el-button @click="taskOperateLockApi('unlock')"
                        :loading="lockBtnLoad"
                    >取 消</el-button>
                    <el-button type="primary" disabled v-if="downTime>0"
                    >
                        {{downTime + '秒后才可审核'}}
                    </el-button>
                    <el-button type="primary" @click="handleClickAudit" v-else
                        :loading="affirmBtnLoad"
                    >
                        确 定
                    </el-button>
                </div>
                <task-step
                    mode="userTemplate"
                    :uploadBids="uploadBids"
                    :taskSteps="curAuditTask.custom_steps"
                />

            </div>
        </el-dialog>
    </div>
</template>

<script>
    import TaskApproval from './index.js';
    export default TaskApproval;
</script>
<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
<style lang="scss" scoped>
    .title {
        margin-bottom: 25px;
        font-size: 21px;
        margin-top: 65px;
    }
    .detailItem {
        padding: 0px 10px;
    }
    .footerSmallbtn{
        margin-top:40px;
        margin-left:55px;
    }
    .approval-btn-group{
      text-align: center;
      margin-top: 20px;
    }
</style>
